<template>
    <div>
        <el-card>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>申请列表</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="btnBox">
                <div>
                    <!-- 总部 才展示 -->
                    <el-button size="small" icon="el-icon-check" @click="applyHandle">一键通过</el-button>
                </div>
            </div>
            <el-table :data="applyTable" border style="width: 100%" height="630" @selection-change="selectChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="id" label="ID" width="70"></el-table-column>
                <el-table-column prop="name" label="名称" width="100"></el-table-column>
                <el-table-column prop="reason" label="申请理由" width="100"></el-table-column>
                <el-table-column prop="time" label="申请时间"></el-table-column>
                <el-table-column prop="handleTime" label="处理时间"></el-table-column>
                <el-table-column label="公司意见" width="100">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.gsStatus == 1">已同意</el-tag>
                        <el-tag type="warning" v-else>未处理</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="总部意见" width="100">
                    <template slot-scope="scope">
                        <el-tag type="success" v-if="scope.row.status == 1">已同意</el-tag>
                        <el-tag type="warning" v-else>未处理</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <!-- 推广公司处理 -->
                        <el-button size="small" icon="el-icon-tickets" v-if="scope.row.status == 0"
                            @click="gsApplyHandle(scope.row)">处理</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="paginationBox">
                <el-pagination @size-change="aHandleSizeChange" @current-change="aHandleCurrentChange"
                    :current-page="aPageNum" :page-sizes="[50, 100, 200]" :page-size="aPageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="aTotalNum"></el-pagination>
            </div>
        </el-card>


        <!-- 申请弹窗 -->
        <el-dialog title="申请处理" :visible.sync="applyDia" width="30%" :before-close="closeApplyDialog">
            <el-table :data="applyList" border style="width: 100%">
                <el-table-column prop="product_name" label="姓名"></el-table-column>
                <el-table-column prop="product_name" label="申请信息"></el-table-column>
                <el-table-column prop="product_name" label="内容"></el-table-column>
                <!-- <el-table-column prop="product_name" label="佣金结算状态">
                    <template slot-scope="scope">
                        <el-tag type="success">已结清</el-tag>
                        <el-tag type="warning">未结清</el-tag>
                    </template>
                </el-table-column> -->
            </el-table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeApplyDialog">取 消</el-button>
                <el-button type="primary" @click="submitApply">通 过</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import { getCompanyList } from '../../network/saleuser'
export default {
    data() {
        return {
            tableData: [{
                id: 1
            }],
            pageSize: 50,
            pageNum: 1,
            totalNum: 0,
            userName: '', // 推广员名称
            selectGsId: '',//推广公司 id
            gsList: [
                {
                    id: 1,
                    name: '推广公司1'
                },
                {
                    id: 2,
                    name: '推广公司2'
                },
            ],

            addDia: false, // 弹窗
            diaFlag: '',//  jie  结算弹窗   detail  结算详情 

            jieForm: {  // 结算详情
                userId: '',
                daiJieNum: '', //待结算佣金
                resNum: 0, // 剩余佣金
                jieNum: '',  // 本次结算佣金
                note: '',
            },
            rules: {
                jieNum: [
                    { required: true, message: '请输入本次结算佣金', trigger: 'blur' },
                ],
            },
            jieDetailList: [],//结算佣金详细记录

            leaveDia: false,
            leaveForm: {
                userId: '',
                note: '',
            },



            activeName: 'list',


            // 申请列表 部分
            applyTable: [{
                id: 1,
                name: '建国',
                reason: '因个人原因',
                time: '2024-05-16 10:10',
                handleTime: '2024-05-16 11:02',
                gsStatus: 1,
                status: 0,
            },],

            aPageSize: 50,
            aPageNum: 1,
            aTotalNum: 0,
            applyDia: false,

            applyList: [],//申请详情

            checkList: [],// 选择的数据
        };
    },
    methods: {

        handle(flag, obj) {
            this.diaFlag = flag
            this.addDia = true

            if (flag == 'jie') {
                // 结算
                this.jieForm.daiJieNum = 200



            } else if (flag == 'detail') {
                // 结算详情
            }
        },

        //   提交结算
        submitAddDialog() {
            this.$refs.form.validate((valid) => {
                if (!valid) return

                console.log(this.jieForm);

            });


        },

        // 提交离职申请
        submitLeave() {
            if (this.leaveForm.note == '') {
                this.$message.warning('请输入离职原因')
                return
            }

            console.log(this.leaveForm);

        },

        leaveHandle(obj) {
            this.leaveForm.userId = 1
            this.leaveDia = true
        },

        // 检测本次结算佣金
        inputHandle() {

            var form = this.jieForm

            if (form.jieNum > form.daiJieNum) {
                this.$message.warning('结算佣金大于待结算佣金，请仔细核对')
                form.jieNum = 0
            }
            form.resNum = form.daiJieNum - form.jieNum

            this.jieForm = form
        },

        getList(flag) {
            if (flag == 'search') {
                // 获取数据
                console.log(this.userName);
                console.log(this.selectGsId);
            } else if (flag == 'res') {
                this.tableData = []
                this.userName = ''
                this.selectGsId = ''
                this.$message.success('已重置')
            }
        },

        handleSizeChange(val) {
            this.pageSize = val;
            this.getList('search')
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getList('search')
        },

        closeAddDialog() {
            this.addDia = false
            if (this.diaFlag == 'jie') {
                this.$refs.form.resetFields()
            }
        },


        // 申请列表部分

        getApplyList() {

        },

        // 公司审核
        gsApplyHandle(obj) {
            // 根据id  获取信息

            this.applyList = obj
            console.log(obj);
            this.applyDia = true
        },

        // 总部审核
        applyHandle() {

            if (this.checkList.length == 0) {
                this.$message.warning('请选择要操作的数据')
                return
            }

            this.$confirm('是否通过所选申请审核?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message.success('审批成功')
            }).catch(() => {
            });

        },

        // 通过申请
        submitApply() {
            this.$confirm('是否通过该申请?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message.success('审批成功')
                this.closeApplyDialog()
            }).catch(() => {
            });


        },

        aHandleSizeChange(val) {
            this.aPageSize = val;
            this.getApplyList()
        },
        aHandleCurrentChange(val) {
            this.aPageNum = val;
            this.getApplyList()
        },

        closeApplyDialog() {
            this.applyDia = false
        },
        closeLeaveDialog() {
            this.leaveDia = false
        },


        selectChange(val) {
            this.checkList = val
        },





    },
    created() {
        getCompanyList().then(res => {
            this.gsList = res.data
        })
    },
    filters: {

    },
};
</script>

<style scoped>
.btnBox>div>span {
    width: 100px;
    display: inline-block;
    font-size: 14px;
}

.nameTip {
    margin-bottom: 16px;
}

.btnBox {
    margin-top: 16px;
}
</style>